<template>
	<view class="coursedtl" v-if="info">
		<view class="videodtl-video">
			<view class="speed-btn" v-if="videoUrl">
				<picker bindchange="bindSpeedChange" :value="speedIndex" :range="speedDate">
					倍速
				</picker>
			</view>
			<video v-if="videoUrl" id="myVideo" :src="videoUrl" binderror="videoErrorCallback"
				:show-center-play-btn='true' :show-play-btn="true" controls object-fit="fill" play-btn-position="center"
				:enable-progress-gesture="false" picture-in-picture-mode="['push', 'pop']"
				bindenterpictureinpicture='bindVideoEnterPictureInPicture'
				bindleavepictureinpicture='bindVideoLeavePictureInPicture'></video>
		</view>
		<view class="banner" v-if="!videoUrl">
			<swiper :indicator-dots="indicatorDots" autoplay interval="5000" duration="1000" bindchange="swiperChange"
				circular="true">
				<swiper-item bindtap="bannerBtn" v-for="(item,index) in info.banner" :key="item">
					<view class='box'>
						<image class="img" :src="imgHost + item"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="dots">
				<view class="dot Border" v-for="(item,index) in info.banner.length" :key="index"
					:class="index == currentIndex ? 'active' : ''"></view>
			</view>
		</view>
		<view class="top">
			<view class="tit-top flow-space-between-center">
				<view class="left">
					<view class="con-tit"><text v-if="info.title_sign">{{info.title_sign}}</text>{{info.name}}</view>
					<view class="des">{{info.describe}}</view>
				</view>
				<button class="share" catchtap="onShareAppMessage" open-type='share'></button>
			</view>
			<view class="tag">
				<view class="tag-lis" v-for="(item,index) in info.tag" :key="index" v-if="item">{{item}}</view>
			</view>
		</view>
		<view class="con">
			<view class="menu flow-center" v-if="info.catalogue || info.type == 'resource'">
				<view class="menu-lis" :class="navIndex == 0?'active':''" @click="navBtn" data-type="0">
					<text>课程介绍</text>
				</view>
				<view class="menu-lis" :class="navIndex == 1?'active':''" @click="navBtn" data-type="1">
					<text>{{info.type == 'resource'?'资料包':'目录'}}</text>
				</view>
			</view>
			<!-- 课程介绍 -->
			<view class="dtl" v-if="navIndex == 0">
				<rich-text :nodes="info.introduce"></rich-text>
				<!-- 其它课程推荐 -->
				<view class="other-course" v-if="info && info.relation && info.relation.length">
					<view class="other-course-tit">更多推荐</view>
					<swiper autoplay interval="4000" duration="1000" :next-margin="info.relation.length > 1 ?'20px':''"
						bindchange="swiperChange" :circular="true">
						<swiper-item v-for="(item,index) in info.relation" :key="index" @click="openPage"
							data-url="/pages/course/coursedtl/coursedtl" :data-id="item.id">
							<view class='box'>
								<image class="img" :src="item.image"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 目录 -->
			<view class="content" v-if="navIndex == 1">
				<view class="list" v-for="(item,index) in info.catalogueAll" :key="index">
					<view class="list-top Border ellipsis1" :class="item.is_show ? 'active':''" @click="showBtn"
						:data-index="index">{{index}}</view>
					<view class="list-con" v-if="item.is_show">
						<view class="" v-for="(val,listIndex) in item.list" :key="listIndex">
							<!-- 资料 -->
							<view class="lis" :class="title == val.class_name && listIndex == playIndex ? 'active' : ''"
								@click="viewProfile" :data-url="val.url" :data-key="val.resource_name"
								:data-index="listIndex" :data-lock="val.lock" v-if="val.mode == 'resource'">
								<view class="lis-tit ellipsis1">
									{{listIndex+1 > 9 ? listIndex+1 : '0' + (listIndex+1)}}、{{val.resource_name}}
								</view>
								<view class="con-r" v-if="val.lock == 0 || status == 2">查看</view>
								<view class="lock" v-else></view>
							</view>
							<!-- 视频 -->
							<view class="lis" :class="title == val.class_name && listIndex == playIndex ? 'active' : ''"
								@click="playVideo" :data-video="val.url" :data-key="val.class_name"
								:data-index="listIndex" :data-lock="val.lock" v-if="val.mode == 'video'">
								<view class="lis-tit ellipsis1">
									{{listIndex+1 > 9 ? listIndex+1 : '0' + (listIndex+1)}}、{{val.video_name}}
								</view>
								<view class="des">{{val.time}}</view>
								<template v-if="status == 2">
									<!-- 已购买 -->
									<view class="play no"></view>
								</template>
								<view class="con-r" v-if="val.lock == 0">试看</view>
								<view class="lock" v-if="val.lock == 1"></view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 购买 -->
		<view class="buy flow-space-between-center Border">
			<view class="buy-l-img flow-start-center">
				<image class="img" src="../../static/icon/coursedtl.png"></image>
				<view class="buy-l" v-if="!isIphone">
					<view class="buy-l-top">
						¥<text class="now-price">{{info.price}}</text>{{info.spec.length > 0 ? '起' : ''}}
						<text class="old-price">¥{{info.ot_price}}{{info.spec.length > 0 ? '起' : ''}}</text>
					</view>
					<view class="buy-l-bottom">
						<text class="des">{{info.buy_num}}人已购买</text>
						<text class="des2" v-if="info.limit_time == 1">{{info.end_time_text}}</text>
					</view>
				</view>
			</view>
			<view class="buy-r flow-start-center">
				<view class="btn"
					:class="info.sell_out == 0 ? info.limit_time == 1 && info.end_time_text == '已停售' ? 'no' : '' : 'no'"
					@click="info.sell_out == 1 ? '' : info.limit_time == 1 && info.end_time_text == '已停售' ? '' :  info.spec.length > 0 ? moreBtn() : goBuy()">
					{{info.sell_out == 0 ? info.limit_time == 1 && info.end_time_text == '已停售' ? '已停售' : '立即购买': '已售罄'}}
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="order-cancel-q" v-if="specShow">
			<view class="order-cancel Border">
				<view class="title">选择购买<view class="close" @click="closeSpec"></view>
				</view>
				<view class="con-c">
					<view v-for="(item,index) in specList" :key="index">
						<view class="tit">{{item.title}}</view>
						<view class="flow-flex-start con-c-item">
							<view v-for="(its,ins) in item.list" :key="ins" class="lis"
								:class="(selectSpec[item.title] == its.name) ? 'active' :  its.able ? '' : 'disabled'"
								@click="changeSpec" :data-key="item.title" :data-value="its.name" :data-able="its.able">
								{{its.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="order-cancel-buy flow-space-between-center Border">
					<view class="buy-l-img flow-start-center">
						<image class="img" src="../../static/icon/coursedtl.png"></image>
						<view class="buy-l">
							<view class="buy-l-top">
								¥<text
									class="now-price">{{info && specIndex >  -1 && info.spec[specIndex].price > 0 ? info.spec[specIndex].price : 0}}</text>
							</view>
							<view class="buy-l-bottom">
								<text class="txt" decode="true">{{info.buy_num}}人已购买&nbsp;&nbsp;&nbsp;&nbsp;<template
										v-if="info.limit_time == 1"><text>{{info.end_time_text}}</text></template></text>
							</view>
						</view>
					</view>
					<view class="btn flow-center" @click="goBuy">
						提交
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
		import weixin from "weixin-js-sdk"
	import $C from '@/common/config.js';
	let indexArr = [];
	export default {
		data() {
			return {
				imgHost: $C.imgHost,
				list: [],
				banner: [],
				emptyShow: false,
				status: 'loadmore',
				timeList: [], //时间戳
				timeIntervalSeveral: null,
				
				isIphone: false,
				specShow: false,
				indicatorDots: false, //是否显示面板指示点
				current: true,
				currentIndex: 0, //当前所在滑块的 index
				specIndex: -1, //规格默认第一个
				selectIndex:[],//选中的规格下标
				navIndex: 0,
				info: null, //详情
				videoShow: false,
				videoUrl: '', //视频链接
				id: '',
				spec: '',//规格
				start_time:null,//进入时间
				speedDate:[0.5,0.8,1.0,1.25,1.5,2.0],//倍速播放
				speedIndex:'2',//选择的倍速播放
				mobile:'',//是否有电话号码
				mobileShow:false,//授权弹窗
				specList2:[
				    { title: "颜色", list: ["红色", "紫色", "白色", "黑色"] },
				],
				skuList:[
				  { id: 1608188117179, specs: ["红色", "套餐一", "128G"] },
				],
				specList:[],
				selectSpec:{},
			}
		},
		computed: {
			...mapState(['userInfo']), // vuex获取用户数据
		},
		onLoad(options) {
			this.id = options.id || '';
			let navIndex = options.type || 0;
			let spec = options.spec || '';
			this.getInfo();
		},
		onShow() {
			
		},
		methods: {
			/**
			 * 切换导航
			 */
			navBtn(ret) {
				let that = this;
				var _type = ret.currentTarget.dataset.type;
				if (that.navIndex == _type) {
					return false;
				}
				this.dataList = []
				this.navIndex = _type
				this.page = 1
			},
			/**
			 * 查看资料
			 */
			viewProfile(e) {
				let that = this;
				let url = e.currentTarget.dataset.url;
				let key = e.currentTarget.dataset.key;
				let index = e.currentTarget.dataset.index;
				let lock = e.currentTarget.dataset.lock;
				let file = decodeURIComponent(url); // 解码(注意:涉及到文件名中有中文需要转码)
				file =  key + '.' +  file.substring(file.lastIndexOf('.') + 1);
				if (lock == 1 && that.status != 2) {
					uni.showToast({
						title:'请购买后查看资料',
						icon:'none'
					})
					return false;
				}
				uni.showLoading({
					title:'下载中...',
					mask:true,
				})
				uni.downloadFile({
				  // 示例 url，并非真实存在
				  url: url,
				  filePath: wx.env.USER_DATA_PATH + '/' + file, // 本地自定义的文件名
				  success: function (res) {
					uni.hideLoading();
				    const filePath = res.filePath
				    uni.openDocument({
				      filePath: filePath,
					  showMenu: true,
				      success: function (res) {
				        // console.log('打开文档成功')
				      }
				    })
				  }
				})
			},
			/**
			 * 目录展开收缩
			 */
			showBtn(ret) {
				var _index = ret.currentTarget.dataset.index;
				var info = JSON.parse(JSON.stringify(this.info));
				info.catalogueAll[_index].is_show = !info.catalogueAll[_index].is_show;
				this.info = info;
			},
			// 教师更多展示
			showMore(e) {
				let index = e.currentTarget.dataset.index;
				// console.log('indexindexindexindex',index)
				let list = [...this.list];
				list[index].moreShow = !list[index].moreShow;
				this.list = list;
			},
			/**
			 * 更多规格
			 */
			moreBtn(e) {
				this.specShow = true;
			},
			// 点击事件
			changeSpec(e){
				let key = e.currentTarget.dataset.key
				let value = e.currentTarget.dataset.value
				let able = e.currentTarget.dataset.able
				if(!able) return
				let selectSpec = this.selectSpec;
				let specList = JSON.parse(JSON.stringify(this.specList));
				if(selectSpec[key] === value){
					selectSpec[key] = ''
				}else {
					selectSpec[key] = value
				}
				// forEach循环改变原数组
				specList.forEach(item => {
				item.list.forEach(its => {
					its.able = this.isAble(item.title, its.name);
						// console.log(its.name, its.able);
					});
				});
				this.specList = specList;
				this.selectSpec = selectSpec;
				this.specPrice();
			},
			/**
			 * 多规格计算价格
			 */
			specPrice() {
				let that = this;
				let index = -1;
				let txt = '';
				// 之前
				// for (var i = 0; i < that.data.selectIndex.length; i++) {
				// 	txt += that.data.info.spec_header_text[i];
				// 	txt += ':' + that.data.info.spec_text[i][that.data.selectIndex[i]] + '|'
				// }
				let selectSpec = this.selectSpec;
				for (let val in selectSpec) {
					txt += `${val}:${selectSpec[val]}|`
				}
				txt = txt.substring(0,(txt.length - 1))
				for (var i = 0; i < that.info.spec.length; i++) {
					if(txt == that.info.spec[i].spec_name){
						index = i;
						break;
					}
				}
				this.specIndex = index
			},
			/**
			 * 立即购买
			 */
			goBuy(e) {
				let that = this;
				let id = that.info.id;
				if(that.specIndex == -1 && that.info.spec){
					uni.showToast({
						title:'请选择规格',
						icon:'none'
					})
					return;
				}
				let spec = that.info.spec ? that.info.spec[that.specIndex].spec_name : '';
				if (that.isdelay) {
					return false;
				} else {
					this.isdelay = true
					setTimeout(function() {
						that.isdelay = false
					}, 1000)
				}
				// mode = H5
				let parmes = {
					id: id,
					spec: spec,
				}
				// #ifdef H5
					parmes.mode = 'H5'
				// #endif
				this.$H.post('api/subject/buy', parmes).then(res => {
					if (res.is_pay == 1) {
						uni.showToast({
							title:res.msg
						})
					} else {
						// #ifdef H5
							that.pay(res.payConfig);
						// #endif
						// that.wxPay(res) //微信支付
					}
				})
			},
			pay(data) {
				let self = this;
				let appId = data.appId;
				let timestamp = data.timestamp;
				let nonceStr = data.nonceStr;
				let signature = data.paySign;
				let packages = data.package;
				let signtype = data.signType;
				weixin.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: appId, // 必填，公众号的唯一标识
					timestamp: timestamp, // 必填，生成签名的时间戳
					nonceStr: nonceStr, // 必填，生成签名的随机串
					signature: signature, // 必填，签名，见附录1
					jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});
				weixin.ready(function() {
					weixin.chooseWXPay({
						timestamp: timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
						package: packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
						signType: signtype, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign: signature, // 支付签名
						success: function(res) {
							uni.showModal({
								showCancel:false,
								title:'温馨提示',
								content:'购买成功，进入爱面试小程序使用相关服务',
								confirmText:'关闭'
							})
						},
						cancel: function(res) {
							uni.showToast({
								title:'支付已取消'
							})
						},
						fail: function(res) {
							uni.showToast({
								title:'支付失败'
							})
						}
					});
				});
			
				weixin.error(function(res) {
					uni.showToast({
						title:'请重新下单'
					})
				});
			},
			/**
			 * 微信支付
			 */
			wxPay: function(data) {
				let that = this;
				uni.requestPayment({
					'appId': data.payConfig.appId,
					'nonceStr': data.payConfig.nonceStr,
					'package': data.payConfig.package,
					'timeStamp': data.payConfig.timestamp,
					'paySign': data.payConfig.paySign,
					'signType': data.payConfig.signType,
					'success': function(res) {
						if (res.errMsg == 'requestPayment:ok') {
							uni.showToast({
								title:'支付成功'
							})
						}
					},
					'fail': function(res) {
						uni.showToast({
							title:'支付失败'
						})
					},
					'complete': function(res) {
						console.log(res)
					}
				})
			},
			/**
			 * 关闭规格
			 */
			closeSpec(e) {
				this.specShow = false
			},
			
			/**
			 * 获取banner
			 */
			getInfo() {
				let that = this;
				this.$H.get('api/subject/getInfo', {
					id: this.id,
				}).then(res => {
					if(res.is_exist != 1){
						uni.showToast({
							title:'课程已下架',
							icon:'none'
						})
						return;
					}
					res.banner = res.banner.split(',');
					res.tag = res.tag.split(',');
					// 多规格默认选中每个规格的第一个
					let selectIndex = [];
					indexArr = [];//重置选中的下标
					try{
						selectIndex = that.getIndex(res.spec_array);
					}catch(e){
						//TODO handle the exception
					}
					res.introduce = res.introduce.replace(/<img([\s\w"-=\/\.:;]+)/ig,
						'<img style="width: 100%;display:block" $1');
					// console.log(res);
					let catalogueAll = {...res.catalogue,...res.resource};
					res.catalogueAll = catalogueAll;
					let spec_text_new = [];
					try{
						for (let i = 0; i < res.spec_text.length; i++) {
							let item = [];
							for (let j = 0; j < res.spec_text[i].length; j++) {
								let obj = {
									name:'',
									is_select:1,
								}
								obj.name = res.spec_text[i][j];
								item.push(obj);
							}
							spec_text_new.push(item)
						}
					}catch(e){
						//TODO handle the exception
					}
					res.spec_text_new = spec_text_new;
					this.info = res;
					this.selectIndex = selectIndex;
					that.singleCountDown(res);//倒计时
					that.checkUserBuy(res.id,that.spec);
					that.reorganizationData(res)//组装数据
				})
			},
			/**
			 * 检查用户是否购买
			 */
			checkUserBuy(id,spec) {
				let that = this;
				this.$H.get('api/subject/checkUserBuy', {id: id,spec: spec}).then(res => {
					this.status = res.status
				})
			},
			//倒计时
			singleCountDown: function() {
				var that = this;
				let newInfo = that.info;
				var time = 0;
				var obj = '';
				var endTime = newInfo.end_time*1000; //结束时间时间戳
				var currentTime = new Date().getTime(); //当前时间时间戳
				time = (endTime - currentTime) / 1000;
				if(newInfo.limit_time == 1){
					// 如果活动未结束
					if (time > 0) {
						let isday =  parseInt(time / (60 * 60 * 24));
						let day =  Math.ceil(time / (60 * 60 * 24));
						let hou = parseInt(time / (60 * 60));
						let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
						let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
						if(isday > 0){
							obj = '距停售' + day + '天';
						}else{
							obj = '距停售' + that.timeFormat(hou) + ':' + that.timeFormat(min) + ':' + that.timeFormat(sec);
						}
					} else { //活动已结束
						obj = '已停售'
						clearTimeout(that.data.timeIntervalSeveral); //清除定时器
					}
				}
				newInfo.end_time_text = obj;
				var timeIntervalSingle = setTimeout(that.singleCountDown, 1000);
				this.timeIntervalSingle = timeIntervalSingle
				this.info = newInfo
			},
			/**
			 * 打开页面
			 */
			openPage: function(e) {
				let that = this;
				let _url = e.currentTarget.dataset.url;
				let _id = e.currentTarget.dataset.id;
				// 打开视频详情
				uni.navigateTo({
					url: _url + '?id=' + _id,
				})
			},
			bannerBtn(e) {
				var that = this;
				var type = e.currentTarget.dataset.type || '';
				let _url = e.currentTarget.dataset.url || '';
				let h5url = e.currentTarget.dataset.hurl || '';
				let action = e.currentTarget.dataset.action || '';
				let param = e.currentTarget.dataset.param || '';
				if (action == 'click') {} else if (!h5url) {
					if (_url) {
						uni.navigateTo({
							url: _url
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages/web/web?webUrl=' + h5url
					})
				}
			},
			// 组装数据
			reorganizationData(info){
				// 处理数据
				let spec = info.spec;
				let skuList = [];
				let specList = [];
				for (let i = 0; i < spec.length; i++) {
					let obj = {
						price: spec[i].price,
						specs:[],
					}
					let item = spec[i].spec_name.split('|');
					for (let k = 0; k < item.length; k++) {
						let val = item[k].split(':')[1];
						obj.specs.push(val);
					}
					skuList.push(obj);
				}
				if(info && info.spec_header_text){
					for (let i = 0; i < info.spec_header_text.length; i++) {
						let section = {
							title:info.spec_header_text[i],
							list:info.spec_text[i],
						}
						specList.push(section);
					}
				}
				
				this.specList2 = specList
				this.skuList = skuList
				this.resetData();
			},
			// 处理基础数据
			resetData(){
				// 初始化选择数据的对象
				let specList = this.specList;
				let specList2 = this.specList2;
				let selectSpec = this.selectSpec;
				for (var i = 0; i < specList2.length; i++) {
					selectSpec[specList2[i].title] = ""
				}
				this.selectSpec = selectSpec
				// 将规格数据处理成我们视图所需要的数据类型
				specList = specList2.map(item => {
				  return {
				    title:item.title,
				    list: item.list.map(its => {
				      return {
				        name:its,
				        // 判断是否可以选择
				        able: this.isAble(item.title, its)  // 注释的调试看逻辑代码 false
				      }
				    })
				  }
				})
				this.specList = specList;
			},
			//时间显示小于10的前面补0方法
			timeFormat(param) {
				return param < 10 ? '0' + param : param;
			},
			//多个倒计时函数
			severalCountDown: function() {
				let that = this;
				let time = 0;
				let obj = '';
				let timeList = that.timeList;
				//遍历数组，计算每个item的倒计时秒数
				for (var i = 0; i < timeList.length; i++) {
					if (timeList[i].limit_time == 1) {
						let endTime = timeList[i].end_time * 1000; //结束时间时间戳
						let currentTime = new Date().getTime(); //当前时间时间戳
						time = (endTime - currentTime) / 1000;
						// 如果活动未结束
						if (time > 0) {
							let isday = parseInt(time / (60 * 60 * 24));
							let day = Math.ceil(time / (60 * 60 * 24));
							let hou = parseInt(time / (60 * 60));
							let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
							let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
							if (isday > 0) {
								obj = '距停售' + day + '天';
							} else {
								obj = '距停售' + that.timeFormat(hou) + ':' + that.timeFormat(min) + ':' + that.timeFormat(sec);
							}
						} else { //活动已结束
							obj = '已停售'
							clearTimeout(that.data.timeIntervalSeveral); //清除定时器
						}
						timeList[i].timeTxt = obj;
					}
				}
				let timeIntervalSeveral = setTimeout(that.severalCountDown, 1000);
				this.timeIntervalSeveral = timeIntervalSeveral;
				this.timeList = timeList;
			},
			// 判断规格是否可以被选择  核心函数 key当前的规格的title   value规格值
			isAble(key, value){
				// console.log('key',key)
				// console.log('value',value)
				let selectSpec = this.selectSpec;
				let skuList = this.skuList;
				let specList2 = this.specList2;
			  // 深拷贝 避免被影响
			  var copySelectSpec = JSON.parse(JSON.stringify(selectSpec));
			  // 用对象的好处就在这了 直接赋值当前验证项
			  copySelectSpec[key] = value;
			  // 用数组的 some 方法 效率高 符合条件直接退出循环
			  let flag = skuList.some(item => {
			    // 条件判断 核心逻辑判断
			    // console.log(item)
			    var i = 0 ;
			    // 这个for in 循环的逻辑就对底子不深的人来说就看不懂了 原理就是循环已经选中的 和 正在当前对比的数据 和 所有的sku对比 只有当前验证的所有项满足sku中的规格或者其他规格为空时 即满足条件 稍微有点复杂 把注释的调试代码打开就调试下就可以看懂了
			    for(let k in copySelectSpec) {
			      //  console.log(copySelectSpec[k])  // 注释的调试看逻辑代码
			      if(copySelectSpec[k] != "" && item.specs.includes(copySelectSpec[k])){
			        // console.log(item)
			        i++
			      }else if (copySelectSpec[k] == "") {
			        i++;
			      }
			    }
			    // 符合下面条件就退出了 不符合会一直循环知道循环结束没有符合的条件就 return false 了
			    // console.log(i) // 注释的调试看逻辑代码
				// console.log('flag222',specList.length,i)
			    return i == specList2.length
			  })
			  // console.log(flag)
			  return flag
			},
			// 重置
			reseatSearch() {
				this.pageParam.page = 1;
				this.pageParam.hasMore = true;
				this.getList();
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.pageParam.page = 1;
				this.pageParam.hasMore = true;
				this.getList();
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 5000)
			},
			// // 触底加载
			// onReachBottom() {
			// 	this.pageParam.page += 1;
			// 	this.getList();
			// },
		},
	}
</script>
<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	.course-list .input-placeholder {
		font-size: 30rpx !important;
		font-family: PingFang SC-Regular, PingFang SC;
		color: #999999;
	}
</style>
<style lang="scss" scoped>
	.coursedtl {
		padding-bottom: 110rpx;
	}

	.coursedtl .banner {
		position: relative;
	}

	.coursedtl .banner .img,
	#myVideo {
		width: 100%;
		height: 350rpx;
		display: block;
	}

	.coursedtl .banner swiper {
		height: 350rpx;
	}

	.coursedtl .banner .dots {
		width: 750rpx;
		height: 12rpx;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 20rpx;
	}

	/*未选中时的小圆点样式 */
	.coursedtl .banner .dot {
		width: 55rpx;
		height: 8rpx;
		margin-right: 5rpx;
		background-color: rgba(255, 255, 255, 1);
	}

	/*选中以后的小圆点样式  */
	.coursedtl .banner .active {
		background: #ADBDBC;
	}

	.coursedtl .top {
		padding: 20rpx 30rpx 20rpx;
	}

	.coursedtl .top .con-tit {
		font-size: 34rpx;
		font-family: PingFangSC;
		color: #252122;
	}

	.coursedtl .top .con-tit text {
		font-size: 24rpx;
		font-family: PingFangSC;
		font-weight: 400;
		/* color: #4B7AFC; */
		text-align: center;
		border-radius: 30rpx;
		padding: 0 27rpx;
		height: 38rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		/* background:rgba(33, 141, 253, 0.07); */
		position: relative;
		height: 38rpx;
		background: linear-gradient(87deg, #7EA9FF, #347DFF);
		border-radius: 20rpx;
		font-family: PingFangSC;
		margin-right: 10rpx;
		color: #FFFFFF;
		top: -5rpx;
	}

	.coursedtl .top .des {
		font-size: 26rpx;
		font-family: PingFangSC;
		color: #443C3E;
		padding: 15rpx 0 20rpx;
	}

	.tit-top .left {
		width: 600rpx;
	}

	.tit-top .share {
		width: 70rpx !important;
		margin: 0 !important;
		height: 70rpx;
		border-radius: 50%;
		background: url() no-repeat center;
		background-size: 46rpx;
		background-color: rgba(33, 141, 253, 0.07);
		margin-bottom: 14rpx !important;
	}

	.coursedtl .top .tag-lis {
		display: inline-flex;
		padding: 0 10rpx;
		text-align: center;
		font-family: PingFangSC;
		margin: 0 10rpx 10rpx 0;
		font-size: 20rpx;
		font-family: PingFangSC;
		color: #218DFD;
		height: 28rpx;
		background: #EEF6FF;
		border-radius: 4rpx;
		align-items: center;
		justify-content: center;
	}

	.coursedtl .con .menu {
		height: 75rpx;
		line-height: 75rpx;
		background: #F2F2F2;
	}

	.coursedtl .con .menu .menu-lis {
		width: 134rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFangSC;
		font-weight: 500;
		color: #929CB3;
		position: relative;
	}

	.coursedtl .con .menu .menu-lis.active {
		color: #393737;
	}

	.coursedtl .con .menu .menu-lis.active::after {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		content: '';
		width: 55rpx;
		height: 7rpx;
		background: #2A62E3;
		border-radius: 6rpx;
	}

	.coursedtl .content {
		padding: 20rpx 30rpx 0;
	}

	.coursedtl .dtl {
		padding: 20rpx 0 0;
		border-radius: 20rpx;
	}

	.coursedtl .dtl-right {
		position: fixed;
		bottom: 280rpx;
		right: 30rpx;
		z-index: 5;
	}

	.coursedtl .dtl-right .consult {
		width: 55rpx;
		height: 55rpx;
		background: url() no-repeat center;
		background-size: 100%;
	}

	.coursedtl .dtl-right .txt {
		position: absolute;
		top: -70rpx;
		right: 0;
		width: 290rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFangSC;
		font-weight: 600;
		color: #FFFFFF;
		background: rgba(128, 128, 128, 0.43);
	}

	.coursedtl .dtl-right .txt text {
		color: #FFD100;
		text-decoration: underline;
	}

	.coursedtl .dtl-right .txt::after {
		position: absolute;
		top: 50rpx;
		right: 14rpx;
		content: '';
		width: 0;
		height: 0;
		border: 13rpx solid rgba(128, 128, 128, 0.43);
		border-color: rgba(128, 128, 128, 0.43) transparent transparent transparent;
	}

	.coursedtl .list {
		margin-bottom: 10rpx;
	}

	.coursedtl .list .list-top {
		height: 85rpx;
		line-height: 85rpx;
		font-size: 28rpx;
		font-family: PingFangSC;
		font-weight: 500;
		color: #393737;
		padding: 0 70rpx 0 50rpx;
		background-image: url();
		background-position: center right 40rpx;
		background-repeat: no-repeat;
		background-size: 23rpx;
		background-color: #F0F1F5;
		border-radius: 20rpx;
	}

	.coursedtl .list .list-top.active {
		background-image: url();
	}

	.coursedtl .list .list-con {
		padding: 20rpx 90rpx 0rpx 50rpx;
	}

	.coursedtl .list .list-con .lis {
		padding: 10rpx 0;
		position: relative;
	}

	.coursedtl .list .list-con .lis-tit {
		font-size: 28rpx;
		font-family: PingFangSC;
		font-weight: 500;
		color: #B4B4B4;
	}

	.coursedtl .list .list-con .des {
		font-size: 20rpx;
		font-family: PingFangSC;
		font-weight: 500;
		color: #B4B4B4;
		padding-top: 5rpx;
	}

	.coursedtl .list .list-con .con-r {
		width: 76rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		background: rgba(33, 141, 253, 0.07);
		border-radius: 28rpx;
		font-size: 20rpx;
		font-family: PingFangSC;
		font-weight: 400;
		color: #4B7AFC;
		position: absolute;
		top: 12rpx;
		right: -75rpx;
	}

	.coursedtl .list .list-con .lock {
		width: 50rpx;
		height: 50rpx;
		background: url() no-repeat center;
		background-size: 30rpx;
		position: absolute;
		top: 2rpx;
		right: -60rpx;
	}

	.coursedtl .list .list-con .play {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 2rpx;
		right: -60rpx;
	}

	.coursedtl .list .list-con .play::after {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		content: '';
		width: 32rpx;
		height: 32rpx;
		background: url() no-repeat center;
		background-size: 20rpx;
		background-color: #D2D3D5;
		border-radius: 50%;
	}

	.coursedtl .list-con .active .play::after {
		background-color: #4B7AFC;
	}

	.coursedtl .list .list-con .lis.active .lis-tit,
	.coursedtl .list .list-con .lis.active .des {
		color: #4B7AFC;
	}

	.buy {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx;
		z-index: 5;
		background: #FFFFFF;
		box-shadow: 0px 7rpx 23rpx 6rpx rgba(121, 121, 121, 0.14);
	}

	.buy image {
		display: block;
		width: 72rpx;
		height: 72rpx;
		margin-right: 12rpx;
	}

	.buy .buy-l {
		font-family: PingFangSC;
		text-decoration: none;
		color: #F6263E;
	}

	.buy .buy-l text {
		font-size: 24rpx;
		text-decoration: line-through;
		color: #F81227;
	}

	.buy-l .buy-l-top .now-price {
		font-size: 40rpx;
		font-weight: 600;
		text-decoration: none;
	}

	.buy-l .buy-l-bottom {
		font-size: 20rpx;
		font-family: PingFangSC;
		color: #929CB3;
	}

	.buy-l .buy-l-bottom text {
		font-size: 20rpx;
		color: #929CB3;
	}
	.buy-l .buy-l-bottom .des{
		text-decoration: inherit;
	}
	.buy-l .buy-l-bottom .des2 {
		margin-left: 20rpx;
	}

	.buy .buy-r .des {
		font-size: 22rpx;
		font-family: PingFangSC;
		color: #858585;
		text-align: center;
	}

	.buy .buy-r .btn {
		width: 180rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFangSC;
		color: #FFFFFF;
		background: #337CFF;
		border-radius: 47rpx;
		margin-left: 20rpx;
	}

	.buy .buy-r .btn.no {
		background: #BABABA;
		color: #FFFFFF;
	}

	/* 弹窗 */
	.order-cancel-q {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		z-index: 1000;
	}

	.order-cancel-q .order-cancel {
		width: 100%;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 10rpx 0 0;
	}

	.order-cancel-q .order-cancel .title {
		font-size: 30rpx;
		font-family: PingFangSC;
		color: #000000;
		line-height: 80rpx;
		position: relative;
		padding: 0 30rpx;
		text-align: center;
		font-weight: 600;
	}

	.order-cancel-q .order-cancel .close {
		position: absolute;
		top: 0;
		right: 30rpx;
		bottom: 0;
		margin: auto 0;
		width: 50rpx;
		height: 50rpx;
		background: url() no-repeat center;
		background-size: 27rpx;
	}

	.order-cancel-q .order-cancel .price {
		font-size: 28rpx;
		font-family: PingFangSC;
		color: #F6263E;
	}

	.order-cancel-q .order-cancel .txt {
		font-size: 20rpx;
		font-family: PingFangSC;
		color: #858585;
	}

	.order-cancel-q .order-cancel .txt text {
		color: #ED4747;
	}

	.order-cancel-q .order-cancel .con-c {
		padding: 30rpx 30rpx 0;
	}

	.order-cancel-q .order-cancel .con-c .tit {
		font-size: 28rpx;
		font-family: PingFangSC;
		color: #4D4C4D;
		padding: 0 0 20rpx;
	}

	.order-cancel-q .order-cancel .con-c .lis {
		padding: 0 40rpx;
		margin: 0 12rpx 12rpx 0;
		height: 70rpx;
		background: rgba(146, 156, 179, .1);
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: PingFangSC;
		color: #929CB3;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	.order-cancel-q .order-cancel .con-c .lis.active {
		color: #F81227;
		background: rgba(248, 18, 39, .1);
		position: relative;
	}

	.order-cancel-q .order-cancel .con-c .lis.active::after {
		content: '';
		width: 30rpx;
		height: 30rpx;
		background: url('') no-repeat left 8rpx center;
		background-size: 16rpx;
		border-radius: 10rpx;
		background-color: #F81227;
		position: absolute;
		top: 0;
		right: 0;
	}

	.order-cancel-q .order-cancel .con-c .lis.disabled {
		color: #cacacb;
		text-decoration: line-through;
	}

	.con-c-item {
		flex-wrap: wrap;
	}

	/* .order-cancel-q .order-cancel .btn{
		background: #ED4747;
		border-radius: 47px;
		width: 100%;
		height: 57rpx;
		line-height: 57rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFangSC;
		font-weight: 600;
		color: #FFFFFF;
		margin:60rpx 0 30rpx;
	} */

	.order-cancel-buy {
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0px 7rpx 23rpx 6rpx rgba(121, 121, 121, 0.14);
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}

	.order-cancel-buy .buy-l-img image {
		display: block;
		width: 72rpx;
		height: 72rpx;
		margin-right: 12rpx;
	}

	.order-cancel-buy .buy-l-img .buy-l {
		color: #F81227;
	}

	.order-cancel-buy .buy-l-bottom text {
		font-size: 20rpx;
		font-family: PingFangSC;
		color: #929CB3 !important;
	}

	.order-cancel-buy .btn {
		width: 180rpx;
		height: 72rpx;
		background: #F81227;
		border-radius: 36rpx;
		font-size: 30rpx;
		font-family: PingFangSC;
		font-weight: 600;
		color: #FFFFFF;
	}


	.videodtl-video {
		position: relative;
	}

	.speed-btn {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		border-radius: 4rpx;
		background-color: rgba(190, 190, 190, 0.5);
		color: #fff;
		z-index: 999;
		font-size: 22rpx;
	}

	.speed-btn picker {
		display: block;
		height: 100%;
		line-height: 50rpx;
		padding: 0 20rpx;
	}

	/* 授权弹窗 */
	.login-box .close {
		position: absolute;
		top: -65rpx;
		right: 0;
		width: 48rpx;
		height: 124rpx;
		background: url() no-repeat center;
		background-size: 100%;
	}

	.login-box .close {
		top: -80rpx;
	}

	.logo-img image {
		display: block;
		width: 100rpx;
		height: 100rpx;
		margin: 50rpx auto 10rpx;
		border-radius: 50rpx;
	}

	.login-box {
		width: 500rpx;
		height: 400rpx;
		background-color: #fff;
		position: relative;
		border-radius: 30rpx;
		text-align: center;
	}

	.login-dec {
		font-size: 24rpx;
	}

	.login-box .login-btn {
		background-color: #00a2ff;
		color: #fff;
		height: 70rpx;
		width: 50%;
		margin: 40rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		font-size: 26rpx;
		letter-spacing: 2rpx;
	}

	.other-course {
		padding: 0rpx 0 30rpx;
	}

	.other-course swiper {
		height: 350rpx;
	}

	.other-course image {
		display: block;
		width: 100%;
	}

	.other-course-tit {
		line-height: 90rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.title {
		line-height: 40px;
	}

	.spec-item {
		display: inline-block;
		margin-right: 10px;
	}

	.spec-item span {
		border: 1px solid #eee;
		cursor: pointer;
		padding: 5px 10px;
	}

	.spec-item .active {
		border: 1px solid red;
		background-color: red;
		color: #fff;
	}

	.spec-item .disabled {
		color: #c0c4cc;
		cursor: not-allowed;
		background-image: none;
		background-color: #fff;
		border-color: #ebeef5;
	}
</style>